<template>
    <el-tabs v-model="activeName" @tab-click="handleChangeTab">
        <el-tab-pane label="企业内部媒资" name="mediaselflist">
            <media-group-list ref="mediaSelfRef" />
        </el-tab-pane>
        <el-tab-pane label="来自合作企业媒资" name="mediagetlist">
            <media-get-list ref="mediaGetRef" />
        </el-tab-pane>
        <el-tab-pane label="对外分享媒资" name="mediasharelist">
            <media-share-list ref="mediaShareRef" />
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {useRoute, useRouter} from 'vue-router'
    import {ref, nextTick} from 'vue'
    import MediaGroupList from './grouplist/index'
    import MediaGetList from './grouplist/mediaGetList'
    import MediaShareList from './grouplist/mediaShareList'
    export default {
        name: "",
        components: {
            MediaGroupList,
            MediaGetList,
            MediaShareList,
        },
        setup() {
            const mediaSelfRef = ref('')
            const mediaGetRef = ref('')
            const mediaShareRef = ref('')
            const route = useRoute()
            const router = useRouter()
            const activeName = ref('')
            route.query.activename ? activeName.value = route.query.activename : activeName.value = 'mediaselflist'
            if(route.query.activename == undefined ){
                router.push({name:route.name,query:{'activename':activeName.value}})
            }else{
                switch( activeName.value ){
                    case 'mediaselflist':
                        nextTick(() => {
                            mediaSelfRef.value.init()
                        })
                        break
                    case 'mediagetlist':
                        nextTick(() => {
                            mediaGetRef.value.init()
                        })
                        break
                    case 'mediasharelist':
                        nextTick(() => {
                            mediaShareRef.value.init()
                        })
                        break
                }
            }
            // const activeName = ref('mediaselflist')

            /** 切换tab事件 **/
            const handleChangeTab = (tab) => {
                router.push({name:route.name,query:{'activename':tab.props.name}})
                /*if (tab.props.name == 'mediaselflist') {
                    nextTick(() => {
                        mediaSelfRef.value.init()
                    })
                } else if (tab.props.name == 'mediagetlist') {
                    nextTick(() => {
                        mediaGetRef.value.init()
                    })
                } else if (tab.props.name == 'mediasharelist') {
                    nextTick(() => {
                        mediaShareRef.value.init()
                    })
                }*/
            }


            return {
                activeName,
                mediaSelfRef,
                mediaGetRef,
                mediaShareRef,
                handleChangeTab
            }
        }
    }
</script>

<style scoped  lang="scss">

</style>
